<template>
    <div id="app">
        <config-provider :theme-vars="themeVars">
            <router-view v-slot="{ Component, route }">
                <transition
                    mode="out-in"
                    :enter-active-class="route.meta.enterActive"
                    :leave-active-class="route.meta.leaveActive"
                >
                    <component :is="Component" />
                </transition>
            </router-view>
        </config-provider>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ConfigProvider } from 'vant';
import vantThemeVars from '@/constants/vantThemeVars';

export default defineComponent({
    name: 'App',
    components: {
        ConfigProvider,
    },
    setup() {
        const themeVars = {
            primaryColor: '#12c287',
        };

        return {
            themeVars: vantThemeVars,
        };
    },
});
</script>

<style>
html,
body {
    padding: 0;
    margin: 0;
    background-color: white;
}
* {
    box-sizing: border-box;
}
.page {
}
.animate__animated.animate__fastest {
    animation-duration: 0.3s;
}
</style>
